<template>
<div>
  <body>
    <div id="app">
      <div class="header">购物车</div>
      <div class="shoppingMain">
        <div class="shoppingItem" v-for="(item,index) in Arr[0]" :key="item.goods_id">
          <!--列表项-->
          <div class="selectCircle" :class="{checked:item.isSelect}" @click="selectGoods(item)"></div>
          <div class="shoppingImg">
            <img :src="item.goods_img" alt />
          </div>
          <div class="itemRight">
            <p class="title">{{item.goods_name}}</p>
            <p>{{item.color}}</p>
            <div class="numAndMoney">
              <p>￥{{item.goods_price}}</p>
              <div class="numberControl">
                <a class="btn" @click="numDel(item,index)">-</a>
                <input type="text" v-model="item.goods_count" />
                <a class="btn" @click="numAdd(item,index)">+</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottomMain">
        <!--底部固定栏-->
        <div class="selectCircle" :class="{checked:allSelect}" @click="allGoodsSelect"></div>
        <span style="padding: 10px">全选</span>
        <button class="bottombtn2" @click="delGoods">删除</button>
        <button class="bottombtn1">￥{{sum.toFixed(2)}}&nbsp;</button>
        <button @click="buyGoods" class="jiesuan">结算</button>
      </div>
    </div>
  </body>
</div>
</template>

<script>
import uri from "@/config/uri";
export default {
  data() {
    return {
      Arr: [],
      allSelect: false,
      isSelect:false,
      sum: 0 ,
      shoppingList:[]
    };
  },
  created() {
    this.$http.get(uri.getCarInfo).then((ret) => {
      // console.log(ret.cartInfo);
      console.log(ret.cartInfo);
      this.Arr.push(ret.cartInfo);
      this.shoppingList.push(ret.cartInfo)
      // console.log(this.shoppingList);
      // console.log(this.Arr);
    });
  },
  methods: {
    selectGoods(item) {
      console.log(item);
      //商品选择方法
      item.isSelect = !item.isSelect; //改变选择状态
      // this.allSelect = false;
      if ( item.isSelect === true ) {
        this.sum += item.goods_price * item.goods_count
      } else {
        this.sum -= item.goods_price * item.goods_count
      } //结算处商品总额计算
    },
    allGoodsSelect() {
      //全选商品方法
      this.allSelect = !this.allSelect; //改变选择状态
      var shop = this.shoppingList[0];
      if (this.allSelect == true) {
        this.sum = 0;
        // console.log(this.shoppingList[0]);
        for (var i = 0; i < shop.length; i++) {
          shop[i].isSelect = true;
          this.sum =
            this.sum + shop[i].goods_price * shop[i].goods_count;
        }
      } else {
        for (var i = 0 ; i < shop.length ; i++) {
          shop[i].isSelect = false;
          this.sum = this.sum - shop[i].goods_price * shop[i].goods_count;
        }
      } //结算处商品总额计算
    },
    numAdd(item, index) {
      //商品数量增加
      item.goods_count++;
      if (item.isSelect == true) {
        this.sum = this.sum + item.goods_price;
      } //已选择商品增加数量，需要增加总额
    },
    numDel(item, index) {
      //商品数量减少
      if (item.goods_count == 1) {
            confirm('确定不选一件吗') && this.Arr[0].splice(index, 1)
          } else {
           item.goods_count--;
          }
      if (item.isSelect == true) {
        this.sum = this.sum - item.goods_price;
      } //已选择商品减少数量，需要减少总额
      if (item.goods_count == 0) {
        this.shoppingList.splice(index, 1);
      } //数量减少为0，需要删除对应数据
    },
    buyGoods() {
      //购买方法，这里只弹出提示所购买商品总额
      // if(this.sum !== 0){
        window.location.url = 'https://m.28sjw.com'
        this.$router.resolve('https://m.28sjw.com')
      // alert("购买成功,共花费" + this.sum + "元");
      // }{
      //   alert('请选择商品')
      // }

    },
    delGoods() {
      //删除商品方法
      this.sum = 0; //所选商品被删除，总额置0
      for (var i = 0; i < this.shoppingList.length; i++) {
        if (this.shoppingList[i].isSelect) {
          this.shoppingList.splice(i, 1);
          i--;
        }
      } //对所选商品进行删除操作
      if (this.allSelect) {
        this.shoppingList.splice(0, this.shoppingList.length);
        this.allSelect = false;
      } //全选商品后进行全部删除
    },
  },
};
</script>

<style scoped>
/* 样式设置 */
body {
  margin: 0;
  padding: 0;
  background: #fff;
}
button {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}
#app {
  margin: 0;
  padding: 0;
  width: 100%;
}
.header{
  height: 46px;
  line-height: 46px;
  text-align: center;
}
.shoppingMain {
  width: 100%;
  height: auto;
  margin-bottom: 70px;
}
.shoppingItem {
  width: 100%;
  margin-left: 2%;
  margin-bottom: 20px;
  background: #fff;
  border-radius: 5px;
  display: flex;
}
.selectCircle {
  width: 15px;
  height: 15px;
  border: 1px solid #a7a5a5;
  border-radius: 50%;
  margin: auto 0px auto 10px;
}
.shoppingImg {
  width: 100px;
  height: 100px;
  padding: 10px;
}
.shoppingImg img {
  height: 100%;
  width: 100%;
}
.itemRight {
  font-size: 10px;
  width: 200px;
}
.title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}
.numAndMoney {
  display: flex;
}
input[data-v-3bf43b26]{
  width: 19px;
  height: 20px;
}
input {
  width: 40px;
  height: 20px;
  margin: 10px;
  text-align: center;
}
.numberControl {
  position: absolute;
  right: 30px;
}
.bottomMain {
  position: fixed;
  width: 100%;
  height: auto;
  border: 1px #a7a5a5 solid;
  bottom: 0;
  left: 0;
  background: #fff;
  display: flex;
  padding: 10px;
}
.bottombtn1 {
  width: auto;
  height: 30px;
  border: none;
  color: #fff;
  background-color: #e26411;
  border-radius: 25px;
  margin: 5px 0 0 20px;
}
.jiesuan{
   width: auto;
  height: 30px;
  border: none;
  color: #fff;
  background-color: #e26411;
  border-radius: 25px;
  margin: 5px 0 0 5px;
}
.bottombtn2 {
  width: 70px;
  height: 30px;
  border: none;
  color: #fff;
  background-color: #cecac7;
  border-radius: 25px;
  margin: 5px 0 0 80px;
}
.checked {
  background: #e26411;
  border: 1px solid rgba(0, 0, 0, 0);
}
.btn{
  display: inline-block;
  width: 19px;
  height: 20px;
  border: 1px solid black;
}
</style>>


